<script setup>
import { ref, inject, onMounted, reactive } from 'vue'
import NaMap from '@/utils/na-map'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  zoom: { type: Number, default: 11 },
  modelValue: String,
})
const containerRef = ref()

onMounted(() => {
  new NaMap(containerRef.value, {
    zoom: props.zoom,

    onMouseover(name) {
      emit('update:modelValue', name)
    },
    onMouseout() {
      emit('update:modelValue', null)
    },
  })
})
</script>

<template>
  <div ref="containerRef" class="container"></div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  background: none !important;
}
</style>
<style lang="scss"></style>
